<template>
  <view class="container">
    <!-- 顶部标题 -->
    <view class="header">
      <text class="title">地块秒杀</text>
    </view>
    
    <!-- 秒杀列表 -->
    <view class="sk-list">
      <view 
        class="sk-item" 
        v-for="(item, index) in skList" 
        :key="index"
        @click="goDetail(item.skId)"
      >
        <view class="sk-info">
          <view class="sk-name">地块秒杀 #{{item.skId}}</view>
          <view class="sk-price">
            <text class="current">¥{{item.skPrice/100}}</text>
            <text class="original">原价: ¥{{originalPrice(item)/100}}</text>
          </view>
          <view class="sk-data">
            <text>面积: {{item.skArea}}㎡</text>
            <text>剩余: {{item.skNum}}块</text>
          </view>
          <view class="sk-time">
            <text v-if="getStatus(item) === 0">即将开始: {{formatTimeLeft(item.skstarttime)}}</text>
            <text v-else-if="getStatus(item) === 1" class="active">正在进行: {{formatTimeLeft(item.skendtime)}}</text>
            <text v-else>已结束</text>
          </view>
        </view>
        <view class="sk-btn" :class="{'active': getStatus(item) === 1}">
          <text v-if="getStatus(item) === 0">即将开始</text>
          <text v-else-if="getStatus(item) === 1">立即抢购</text>
          <text v-else>已结束</text>
        </view>
      </view>
    </view>
    
    <!-- 无数据提示 -->
    <view class="empty" v-if="skList.length === 0">
      <text>暂无秒杀活动</text>
    </view>
  </view>
</template>

<script>
import request from '@/util/request.js'

export default {
  data() {
    return {
      skList: [],
      timer: null
    }
  },
  onLoad() {
    this.getSecondKillList()
    // 启动定时器，每秒更新倒计时
    this.timer = setInterval(() => {
      this.$forceUpdate()
    }, 1000)
  },
  onUnload() {
    // 清除定时器
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    // 获取秒杀列表
    getSecondKillList() {
      uni.showLoading({
        title: '加载中'
      })
      
      // 使用封装的request方法
      request({
        url: '/secondKill/selectAll',
        method: 'GET'
      }).then(res => {
        // 处理成功响应
        this.skList = res.data.list || []
      }).catch(err => {
        console.error('获取秒杀列表失败:', err)
        uni.showToast({
          title: '获取秒杀列表失败',
          icon: 'none'
        })
      }).finally(() => {
        uni.hideLoading()
      })
    },
    
    // 跳转到详情页
    goDetail(skId) {
      uni.navigateTo({
        url: `/pages/secondKill/detail?skId=${skId}`
      })
    },
    
    // 计算原价（这里假设从关联的地块信息获取，实际可能需要调整）
    originalPrice(item) {
      // 这里假设原价是秒杀价的1.5倍，实际应从地块信息获取
      return item.skPrice * 1.5
    },
    
    // 获取秒杀状态：0-未开始，1-进行中，2-已结束
    getStatus(item) {
      const now = new Date().getTime()
      const start = new Date(item.skstarttime).getTime()
      const end = new Date(item.skendtime).getTime()
      
      if (now < start) return 0
      if (now > end) return 2
      return 1
    },
    
    // 格式化剩余时间
    formatTimeLeft(timeStr) {
      const targetTime = new Date(timeStr).getTime()
      const now = new Date().getTime()
      let diff = Math.abs(targetTime - now) / 1000
      
      const days = Math.floor(diff / (24 * 60 * 60))
      diff -= days * 24 * 60 * 60
      
      const hours = Math.floor(diff / (60 * 60))
      diff -= hours * 60 * 60
      
      const minutes = Math.floor(diff / 60)
      diff -= minutes * 60
      
      const seconds = Math.floor(diff)
      
      if (days > 0) {
        return `${days}天${hours}小时`
      } else if (hours > 0) {
        return `${hours}小时${minutes}分`
      } else {
        return `${minutes}分${seconds}秒`
      }
    }
  }
}
</script>

<style>
.container {
  padding: 20rpx;
}

.header {
  display: flex;
  justify-content: center;
  padding: 20rpx 0;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
}

.sk-list {
  margin-top: 20rpx;
}

.sk-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.sk-info {
  flex: 1;
}

.sk-name {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.sk-price {
  display: flex;
  align-items: baseline;
  margin-bottom: 10rpx;
}

.current {
  font-size: 36rpx;
  color: #ff4d4f;
  font-weight: bold;
  margin-right: 10rpx;
}

.original {
  font-size: 24rpx;
  color: #999;
  text-decoration: line-through;
}

.sk-data {
  display: flex;
  font-size: 26rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.sk-data text {
  margin-right: 20rpx;
}

.sk-time {
  font-size: 26rpx;
  color: #666;
}

.sk-time .active {
  color: #ff4d4f;
}

.sk-btn {
  width: 160rpx;
  height: 70rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
  border-radius: 35rpx;
  color: #999;
  font-size: 28rpx;
}

.sk-btn.active {
  background-color: #ff4d4f;
  color: #fff;
}

.empty {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300rpx;
  color: #999;
}
</style> 